<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<style>
  body {
    margin: 0;
  }
  @page {
    size: 400px 300px;
    margin: 0;
  }
  .borders {
    border: solid black;
    border-width: 10px 0;
    border-bottom-color: gray;
  }
</style>
<div class="borders">
  <div style="width:50%; box-sizing:border-box; border:solid hotpink; height:850px; background:yellow;"></div>
</div>
<div class="borders">
  <div style="width:25%; height:10px; background:cyan;"></div>
</div>
<div class="borders">
  <div style="width:25%; height:280px; background:cyan;"></div>
</div>
<div class="borders">
  <div style="width:25%; height:10px; background:cyan;"></div>
  <div style="height:270px;"></div>
</div>
<div class="borders">
  <div style="height:280px;"></div>
</div>
<div class="borders">
  <div style="height:100px;"></div>
</div>
